<template>
    <div class="done">
    <h2>done  <span>{{num}}</span></h2>
    <div class="list" v-for = '(item,index) in donevalue'>
    <div class="list-item" :key = item.item>
    <span class="num">{{index+1}}</span>
    <p class="item">{{item.item}}</p>
    <input type="checkbox" name="" @click="todoing(item)" checked v-copy = 'item.item'>
</div>
  </div>
    </div>
  
</template>

<script setup>
import { computed, inject, onMounted, reactive } from '@vue/runtime-core';
const props = defineProps({
    donevalue: {
        type:Array
    } 

})
const emit = defineEmits('todoing')
const todoing = (item) => {
    emit('todoing',item)
}
const num = computed(() => {
    return props.donevalue.length
})
</script>

<style lang="scss">
.done{
    h2{
        margin: 20px auto;
        width: 50%;
        display: flex;
        justify-content: space-between;
    }
    .list{
    .list-item{
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-left: 10px solid paleturquoise;
        border-radius: 10px;
        margin: 10px auto;
        height: 30px;
        width: 50%;
    }
    p{
        margin-right: auto;
    }
    }
    .num{
        margin: 0 10px;
    }
}

</style>